<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
         
    </h:head>
    <h:body>
    <center>
     <img src="http://www.imagenonline.com/img_a2754.png  " height="130" />
      </center>
     <body background="http://nsae01.casimages.net/img/2014/09/04/140904091524706424.jpg"></body>
        <h:form>
                                <p:growl id="messages" showDetail="true" />

                                <h:panelGrid columnClasses="value">
                                     <input type="button" onClick="location.href='http://localhost:8080/ProyectoReservacionSalas/finalizacionrecerva.jsf'" value="Reservar" name="boton" />
                                    <p:schedule id="schedule" value="#{CalendarBean.eventModel}" widgetVar="myschedule">

                                        <p:ajax event="dateSelect" listener="#{CalendarBean.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                                        <p:ajax event="eventSelect" listener="#{CalendarBean.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                                        <p:ajax event="eventMove" listener="#{CalendarBean.onEventMove}" update="messages" />
                                        <p:ajax event="eventResize" listener="#{CalendarBean.onEventResize}" update="messages" />

                                    </p:schedule>
                                
                                </h:panelGrid>

                                <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip">
                                    <h:panelGrid id="eventDetails" columns="2">
                                        <h:outputLabel for="title" value="Title:" />
                                        <p:inputText id="title" value="#{CalendarBean.event.title}" required="true" />

                                        <h:outputLabel for="from" value="From:" />
                                        <p:inputMask id="from" value="#{CalendarBean.event.startDate}" mask="99/99/9999">
                                            <f:convertDateTime pattern="dd/MM/yyyy" />
                                        </p:inputMask>

                                        <h:outputLabel for="to" value="To:" />
                                        <p:inputMask id="to" value="#{CalendarBean.event.endDate}" mask="99/99/9999">
                                            <f:convertDateTime pattern="dd/MM/yyyy" />
                                        </p:inputMask>

                                        <h:outputLabel for="allDay" value="All Day:" />
                                        <h:selectBooleanCheckbox id="allDay" value="#{CalendarBean.event.allDay}" />

                                        <p:commandButton type="reset" value="Reset" />
                                        <p:commandButton id="addButton" value="Save" actionListener="#{CalendarBean.addEvent}" oncomplete="PF('myschedule').update();PF('eventDialog').hide();" />
                                    </h:panelGrid>
                                </p:dialog>    
                            </h:form> 
        <style type="text/css">
    .value {
        width: 1500px;
    }
</style>
        
   
               
            
        
    </h:body>
</html>